<!-- 成员列表带数据 管理员和创建人观看视角 -->
<template>
    <div class="member-list-wrap">
        <TableWrap
            v-if="pageInfo.total > 0"
            :hide-header="true"
            :stripe="false"
            :loading="loading"
            :table-data="list"
            height="auto"
            v-model:page-index="pageInfo.currentPage"
            v-model:page-size="pageInfo.pageSize"
            layout="prev, pager, next"
            :total="pageInfo.total"
            @request-list="getList">
            <el-table-column label="姓名" prop="userName" width="140">
                <template #default="scope">
                    <span class="user-name-wrap" v-if="scope.row.userName">
                        <Ellipsis
                            placement="top"
                            effect="dark"
                            :content="scope.row.userName"
                            :lineHeight="18"
                        />
                    </span>
                    <span v-else>-</span>
                   <span :class="'user-role-' + scope.row.userRole">{{handleRole(scope.row)}}</span>
                </template>
            </el-table-column>
            <el-table-column label="学校名称" prop="schoolName" show-overflow-tooltip width="200">
                <template #default="scope">
                    {{scope.row.schoolName || '-'}}
                </template>
            </el-table-column>
            <el-table-column label="学段学科" prop="stageSubjectName" show-overflow-tooltip></el-table-column>
            <el-table-column label="专题报名时间" prop="joinTime" width="140">
                <template #default="scope">
                    {{scope.row.joinTime ? dayjs(scope.row.joinTime).format('YYYY.MM.DD HH:mm') : '-'}}
                </template>
            </el-table-column>
            <el-table-column label="专题学习状态" prop="completeState" width="120">
                <!-- 完成状态0未开始1进行中2完成 -->
                <template #default="scope">
                    <span :class="'finish-status-'+ scope.row.completeState">{{handleCompleteStatus(scope.row)}}</span>
                </template>
            </el-table-column>
            <el-table-column label="必修慕课完成数量" prop="completedClassCount" width="140">
                <template #default="scope">{{ scope.row.taskUserProgress.requiredCompleteCount }}</template>
            </el-table-column>
            <el-table-column label="选修慕课完成数量" prop="completedClassCount" width="140">
                <template #default="scope">{{ scope.row.taskUserProgress.notRequiredCompleteCount }}</template>
            </el-table-column>
            <el-table-column label="操作" v-if="isCreater" width="120">
                <template #default="scope">
                    <el-button v-if="scope.row.userRole !== 'create'" type="primary" link @click="handleAdmin(scope.row)">{{scope.row.userRole === 'admin' ? '取消管理员' : '设为管理员'}}</el-button>
                </template>
            </el-table-column>
        </TableWrap>
        <NoData class="no-data-wrap" v-else info="暂无成员" url="no-member@2x.png" />
    </div>
</template>

<script setup>
import TableWrap from '@/components/table-wrap/mini-table-wrap.vue';
import NoData from '@/components/no-data.vue';
import Ellipsis from '@/components/ellipsis.vue';
import { handleStageSubject } from '@/lib/biz-tools.js';
import { ref, reactive, onMounted, nextTick } from 'vue';
import dayjs from 'dayjs';
import { useRoute } from 'vue-router';

const route = useRoute();

const emit = defineEmits(['update:page-index', 'update:page-size']);

const props = defineProps({
    isCreater: { // 是否是专题创建人
        type: Boolean,
        default: false
    },
    keyWord: {
        type: String,
        default: ''
    }
})

// 成员列表数据
const list = ref([]);

// 成员列表加载
const loading = ref(false);

// 成员分页数据
const pageInfo = reactive({
    currentPage: 1,
    pageSize: 20,
    total: 0
});

// 获取成员列表数据
function getList (params) {
    console.log(props.keyWord, 'props.keyWordprops.keyWordprops.keyWordprops.keyWord');
    loading.value = true;
    G_transmit('topicTaskUser', {
        queries: {
            pageIndex: pageInfo.currentPage,
            pageSize: pageInfo.pageSize,
            taskId: route.params?.topicId,
            keyword: props.keyWord,
            ...params
        }
    }).then((res) => {
        let rusult = res.data?.rows || [];
        list.value = rusult.map(item => {
            return {
                ...item,
                stageSubjectName: handleStageSubject(item.stageSubjectGradeList || [], '-'),
                schoolName: item.orgName || '',
                userName: item.userName || ''
            }
        })
        pageInfo.total = res.data.total;
    }).catch((_err) => {
        console.log(_err);
    }).finally(() => {
        loading.value = false;
    })
}

// 处理用户角色
function handleRole (courseInfo) {
    if (courseInfo.userRole === 'create') {
        return '创建者';
    } else if (courseInfo.userRole === 'admin') {
        return '管理员';
    } else {
        return '';
    }
}

// 处理完成状态
function handleCompleteStatus (courseInfo) {
    if (courseInfo.completeState == 0) {
        return '未学习';
    } else if (courseInfo.completeState == 1) {
        return '学习中';
    } else if (courseInfo.completeState == 2) {
        return '已完成';
    } else if (courseInfo.completeState == 3) {
        return '未完成';
    } else {
        return '-';
    }
}

// 切换管理员
function handleAdmin (courseInfo) {
    G_transmit('updateTopicUser', {
        data: {
            ...courseInfo,
            userRole: courseInfo.userRole === 'admin' ? 'normal' : 'admin',
        }
    }).then((res) => {
        G_dispatchEvent('toast', { message: '设置成功', type: 'success'});
        refreshData();
        getDetail();
    }).catch(_err => {
        console.log(_err);
    })
}

function refreshData () {
    pageInfo.currentPage = 1;
    nextTick(() => {
        getList();
    })
}

onMounted(() => {
    getList();
})

defineExpose({
    refreshData
})
</script>

<style lang="scss" scope>
.member-list-wrap {
    .user-name-wrap {
        display: inline-block;
        max-width: 50px;
        vertical-align: bottom;
    }
    .no-data-wrap {
        margin: 100px auto 0;
    }
    .user-role-admin { 
        font-size: 10px;
        color: #316658;
        background: #E7F5F1;
        border-radius: 9px;
        line-height: 18px;
        padding: 0 6px;
        margin-left: 4px;
    }
    .user-role-create {
        font-size: 10px;
        color: #715039;
        background: #FBE0E9;
        border-radius: 9px;
        line-height: 18px;
        padding: 0 6px;
        margin-left: 4px;
    }
    .finish-status-0 {
        color: #666666;
    }
    .finish-status-1,
    .finish-status-3 {
        color: #FF9201;
    }
    .finish-status-2 {
        color: #00B042;
    }
}
</style>